<template>
    <button class=" text-sm text-center rounded duration-150 flex justify-center items-center"
        :class="[typeEnum[type], sizeEnum[sizeKey].button, { 'active:scale-105': isActiveAnim }]"
        @click.stop="onButtonClick">
        <!-- loading -->
        <my-svg-icon v-if="loading" name="loading" class="w-2 h-2 animate-spin mr-1"></my-svg-icon>
        <!-- icon 按钮 -->
        <my-svg-icon v-if="icon" :name="icon" class="m-auto" :class="sizeEnum[sizeKey].icon" :color="iconColor"
            :fillClass="iconClass">
        </my-svg-icon>
        <!-- 文字按钮 -->
        <slot v-else></slot>
    </button>
</template>
<script>
import { computed } from "vue-demi"

// type 可选性 表示按钮风格
const typeEnum = {
    primary: 'text-white bg-zinc-800 hover:bg-zinc-900 active:bg-zinc-800',
    main: 'text-white bg-main hover:bg-hover-main active:bg-main',
    info: "text-zinc-800 bg-zinc-200 hover:bg-zinc-300 active:bg-zinc-200"
}
// size 可选项 表示按钮的大小 区分文字按钮和icon按钮
const sizeEnum = {
    // 文字按钮
    default: {
        button: 'w-8 h-4 text-base',
        icon: ''
    },
    // icon 按钮
    'icon-default': {
        button: 'w-4 h-4',
        icon: 'w-1.5 h-1.5'
    },
    small: {
        button: 'w-7 h-3 text-base',
        icon: ''
    },
    'icon-small': {
        button: 'w-3 h-3',
        icon: 'w-1.5 h-1.5'
    }
}
</script>

<script setup>
// 构建type 风格可选项和size 大小可选项
// 通过props 让开发者控制按钮
// 区分icon button 和 text button
// 依据当前的数据 实现视图
// 处理点击事件
const props = defineProps({
    // iocn 图标
    icon: String,
    // icon 颜色
    iconColor: String,
    // icon 图标类名
    iconClass: String,
    // 按钮风格
    type: {
        type: String,
        default: 'main',
        validator(val) {
            // 获取所有的可选项
            const keys = Object.keys(typeEnum)
            // 开发者指定的风格在可选项中
            const result = keys.includes(val)
            if (!result) {
                throw new Error(`你的 type 必须是${keys.join('、')}中的一个`)
            }
            return result
        }
    },
    // 大小风格
    size: {
        type: String,
        default: 'default',
        validator(val) {
            const keys = Object.keys(sizeEnum).filter((key) => !key.includes('icon'))
            const result = keys.includes(val)
            if (!result) {
                throw new Error(`你的 size 必须是${keys.join('、')}中的一个`)
            }
            return result
        }
    },
    // 按钮点击时，是否需要动画
    isActiveAnim: {
        type: Boolean,
        default: true
    },
    //加载状态
    loading: {
        type: Boolean,
        default: false
    }

})

// 处理props.size
const sizeKey = computed(() => {
    return props.icon ? 'icon-' + props.size : props.size
})

// 处理事件
const emits = defineEmits(['cilck'])

const onButtonClick = () => {
    if (props.loading) return
    emits('cilck')
}
</script>

<style lang="scss" scoped>

</style>